<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详细信息</title>
    <script type="text/javascript" th:src="@{/js/jquery-1.7.2.min.js}"></script>
    <link type="text/css" rel="stylesheet" th:href="@{/css/detail.css}"/>
    <script type="text/javascript" th:src="@{/js/productDetail.js}"></script>
</head>
<body>

<div th:fragment="header">
    <!-- top -->
    <div class="soubg">
        <div class="sou">

            <span class="fr">
            <span class="fl" th:if="${session.User == null}">你好，请<a th:href="@{/login}" style="color:#ff4e00;">登录</a>&nbsp;<a
                    th:href="@{/register}" style="color:#ff4e00;">免费注册</a>&nbsp;&nbsp;</span>
            <span class="fl" th:if="${session.User != null}"><a th:href="@{/user/information}">欢迎回来，<span
                    th:text="${session.User.username}"></span></a>&nbsp;|&nbsp;<a
                    th:href="@{/order/orderList}">我的订单</a>&nbsp;</span>
            <span class="fl" th:if="${session.User != null}">|&nbsp;<a th:href="@{/user/logout}">注销</a></span>
        </span>
        </div>
    </div>
    <div id="fade1" class="black_overlay"></div>
    <div id="MyDiv1" class="white_content">
        <div class="white_d">
            <div class="notice_t">
                <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv_1('MyDiv1','fade1')"><img
                        th:src="@{/images/close.gif}"/></span>
            </div>
            <div class="notice_c">
                <table border="0" align="center" cellspacing="0" cellpadding="0">
                    <tr valign="top">
                        <td width="40"><img th:src="@{/images/suc.png}"></td>
                        <td>
                            <span style="color:#3e3e3e; font-size:18px; font-weight:bold;"
                                  id="showMessage">操作成功</span><br/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!-- top -->

    <!-- search -->
    <div class="top">
        <div class="logo">
            <a href="/index"><img src="../images/居家乐.jpg" style="width: 100px;border:0px solid red;"></a>
        </div>
        <div class="search">
            <form th:action="@{/product/search}" method="post">
                <input type="text" name="searchInput" class="s_ipt" autocomplete="on">
                <input type="submit" value="搜索" class="s_btn">
            </form>
        </div>
        <div class="i_car">
            <a th:href="@{/cart/findAllCart}">
                <div class="car_t">
                    购物车 [
                    <span th:text="${cartList.size()}"></span>
                    ]
                </div>
            </a>

            <div class="car_bg">
                <div class="un_login">我的购物车</div>
                <ul class="cars">
                    <li th:each="cart:${cartList}">
                        <div class="img"><a th:href="@{'/product/'+${cart.productId}}"><img
                                th:src="@{'/'+${cart.subImages}}" width="58" height="58"/></a></div>
                        <div class="name"><a th:href="@{'/product/findById/'+${cart.productId}}"
                                             th:text="${cart.name}"></a></div>
                        <div class="price"><font color="#ff4e00" th:text="'￥'+${cart.price}"></font> X <span
                                class="quantity" th:text="${cart.quantity}"></span> = <span class="cost"
                                                                                            th:text="${cart.cost}"></span>
                        </div>
                    </li>
                </ul>
                <div class="price_sum">共计&nbsp;<font color="#ff4e00">￥</font><span id="totalCost"></span></div>
                <div class="price_a"><a th:href="@{/cart/findAllCart}">去结算</a></div>
            </div>

        </div>
    </div>
    <!-- search -->
    <script type="text/javascript">
        $(function () {
            //购物车总价
            var array = $(".cost");
            var totalCost = 0;
            for (var i = 0; i < array.length; i++) {
                var val = parseInt($(".cost").eq(i).html());
                totalCost += val;
            }
            $("#totalCost").html(totalCost);
        });
    </script>
</div>
<div th:fragment="category">
    <div class="menu_bg">
        <div class="menu">
            <div class="nav">
                <div class="nav_t">全部分类</div>
                <div class="leftNav">
                    <ul>
                        <li th:each="levelOne:${list}">
                            <div class="fj">
                                <span class="n_img"></span> <span class="fl" th:text="${levelOne.name}"></span>
                            </div>
                            <div class="zj">
                                <div class="zj_l">
                                    <div class="zj_l_c" th:each="levelTwo:${levelOne.children}">
                                        <h2>
                                            <b style="color: #db3e54;">家具</b>
                                        </h2>
                                        <a th:href="@{/product/search(searchInput=${levelTwo.name})}"
                                           th:text="${levelTwo.name}"
                                           style="padding: 3px 10px;border: 1px solid #e6e6e6;font-size: 14px;float: left;margin: 2px 6px 4px 0;"></a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="menu_r">
                <li><a href="home">首页</a></li>
                <li th:each="productCategory:${list}">
                    <a th:href="@{/product/search(searchInput=${productCategory.name})}"
                       th:text="${productCategory.name}"></a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            //商品类目
            $(".leftNav ul li").hover(
                function () {
                    $(this).find(".fj").addClass("nuw");
                    $(this).find(".zj").show();
                }
                ,
                function () {
                    $(this).find(".fj").removeClass("nuw");
                    $(this).find(".zj").hide();
                }
            )
        });
    </script>
</div>

<div class="i_bg">
    <div class="postion">
    </div>
    <div class="content" style="margin-left: 390px">
        <div id="tsShopContainer" style="float:left;">
            <div id="tsImgS">
                <img th:src="@{'/'+${product.subImages}}" width="390" height="390" style="border:1px solid #EAEAEA;"/>
            </div>
        </div>
        <div class="pro_des">
            <div class="des_name">
                <input type="hidden" value="1" name="entityId" class="n_ipt"/>
                <p th:text="${product.name}"></p>
                “开业巨惠，产家直供”，不光低价，“真”才靠谱！
            </div>
            <div class="des_price">
                本店价格：<b th:text="${product.price}+'  ¥'"></b><br/>
            </div>
            <div class="des_price">
                库存：<b id="stock" th:text="${product.stock}">20</b><br/>
            </div>
            <div class="des_choice">
                <span class="fl">颜色选择：</span>
                <ul>
                    <li class="type checked">红
                        <div class="ch_img"></div>
                    </li>
                    <li class="type">白
                        <div class="ch_img"></div>
                    </li>
                    <li class="type">黑
                        <div class="ch_img"></div>
                    </li>
                    <li class="type">棕
                        <div class="ch_img"></div>
                    </li>
                </ul>
            </div>
            <div class="des_choice">
                <span class="fl">型号选择：</span>
                <ul>
                    <li class="color">大
                        <div class="ch_img"></div>
                    </li>
                    <li class="color checked">中
                        <div class="ch_img"></div>
                    </li>
                    <li class="color">小
                        <div class="ch_img"></div>
                    </li>
                </ul>
            </div>
            <br>
            <br>
            <div class="des_join">
                <div class="j_nums">
                    <input type="text" id="quantity" value="1" name="quantity" class="n_ipt"/>
                    <input type="button" value="" onclick="increase()" class="n_btn_1"/>
                    <input type="button" value="" onclick="reduce()" class="n_btn_2"/>
                </div>
                <input type="hidden" id="productId" value="1">
                <input type="hidden" id="productPrice" value="1">
                <span class="fl">
                     <img th:src="@{/images/j_car.png}" th:onclick="'addCart('+${product.id}+','+${product.price}+')'"/>
                </span>
            </div>
        </div>
    </div>
    <div class="content mar_20">
        <div id="favoriteList">
        </div>
        <div class="l_list">
            <div class="des_border">
                <div class="des_tit">
                    <ul>
                        <li class="current"><a href="#p_attribute">商品属性</a></li>
                        <li><a href="#p_details">商品详情</a></li>
                    </ul>
                </div>
                <div class="des_con" id="p_attribute">
                    <table border="0" align="center" style="width:100%; font-family:'宋体'; margin:10px auto;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td>商品名称:<b th:text="${product.name}"></b></td>
                            <td>商品价格:<b th:text="${product.price}"></b></td>
                            <!--<td>种类： <b th:text="${product.}"></b></td>-->
                            <td>上架时间：<b th:text="${product.createTime}"></b></td>
                        </tr>
                        <tr>
                            <td>商品详细：<b th:text="${product.detail}"></b></td>
                        </tr>
                        <!--<tr>
                            <td>容量：1ml-15ml </td>
                            <td>类型：女士香水，Q版香水，组合套装</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>-->
                    </table>
                </div>
            </div>
            <div class="des_border" id="p_details">
                <div class="des_t">商品详情</div>
                <div class="des_con">
                    <table border="0" align="center" style="width:745px; font-size:14px; font-family:'宋体';"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td th:text="${product.detail}"></td>
                        </tr>
                    </table>
                    <p align="center">
                        <img th:src="@{'/'+${product.subImages}}" width="185" height="155">
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


<!--底部-->
<div class="footer" style="border-top: 2px solid #FF5400;margin-top: 20px;width: 1200px;">
    <div class="footer-hd">
        <p>
            <a href="# ">商城首页</a>
            <b>|</b>
            <a href="# ">物流</a>
        </p>
    </div>
    <div class="footer-bd">
        <p>
            <a href="# ">关于我们</a>
            <a href="# ">合作伙伴</a>
            <a href="# ">联系我们</a>
            <a href="# ">网站地图</a>
            <em>© 2020-2021 1569926710.com 版权所有</em>
        </p>
    </div>
</div>

</body>
</html>